<template>
    <div>
      <el-drawer
        title="测试结果"
        :visible.sync="drawer"
        direction="rtl"
        :before-close="handleClose">
        <div class="drawerDiv">
          <pre>{{showData}}</pre>
        </div>

      </el-drawer>
        <h1>在线接口测试</h1>
      <el-row>
        <el-col :span="16" id="col">
          <p>
            <el-input value="接口名称:" class="label label_text_r" disabled></el-input>
            <el-input placeholder="请输入接口名称" v-model="from.propName"></el-input>
          </p>
          <p>
            <el-input value="这一列填写key" class="label label_text_r" disabled></el-input>
            <el-input value="这一列填写value" class="label_text_r" disabled></el-input>
          </p>
          <section v-for="(value,index) in from.propList" :key="index">
            <section v-if="index === 0">
              <p>
                <el-input placeholder="key" class="label label_text_r" v-model="value.key"></el-input>
                <el-input placeholder="value" v-model="value.value"></el-input>
                <i class="el-icon-circle-plus" @click="addP"></i>
              </p>
            </section>
            <section v-if="index > 0">
              <p>
                <el-input placeholder="key" class="label label_text_r" v-model="value.key"></el-input>
                <el-input placeholder="value" v-model="value.value"></el-input>
                <i class="el-icon-remove" @click="removeP(index)"></i>
              </p>
            </section>
          </section>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="text-align: center;margin: 0">
          <el-button type="primary" @click.native.prevent="subFn">确 定</el-button>
        </el-col>
      </el-row>
    </div>
</template>

<script>
    export default {
        data() {
            return {
              drawer:false,
              showData:'',
                from:{
                  propName:'',
                  propList:[{
                    key:'',
                    value:''
                  }],
                }
            }
        },
        methods: {
          addP:function () {
            this.from.propList.push({
              key:'',
              value:''
            });
          },
          removeP:function (index) {
            this.from.propList.splice(index, 1)
          },
          subFn:function () {
            if(this.from.propName){
            let data = {};
            var arr = this.from.propList;
            for(var i=0;i<arr.length;i++){
              data[arr[i].key] = arr[i].value
            }
            let str = this.encryptionAesRsa(data);
            let encryptData = str.split('%$#@zjt@#$%')[0];
            let encryptKey = str.split('%$#@zjt@#$%')[1];
            let incomData = {
              map:this.from.propName,
              plum_session_api:localStorage.getItem('token'),
              encryptData:encryptKey,
              encryptKey:encryptData
            };
            this.$http.post('',incomData).then((data)=>{
              if(data.ec==200){
                this.drawer =true;
                this.showData = data
              }else {
                this.drawer =true;
                this.showData = data
              }
            }).catch((err)=>{
              this.drawer =true;
              this.showData = err
            })
            }else {
              this.$message.error('请输入接口名');
            }
          },
          handleClose(done) {
            done();
          }
        },

        components: {}
    }
</script>

<style scoped>
  h1{
    font-size:30px;
    color: #555555;
    text-align: center;
    width: 100%;
    margin-top: 50px;
  }
  .el-row{
    margin-top: 30px;
  }
  .el-col{
    margin-left: 20%;
  }
  p{
    line-height: 40px;
    height: 40px;
    font-size: 16px;
    color: #000;
    margin-top: 10px;
  }
  p .label{
    width: 33%;
    margin-right: 2%;
  }
  .el-input{
    width: 60%;
    float: left;
  }
  .label_text_r>>>input{
    color: #606266 !important;
  }
  .el-icon-circle-plus{
    color: #67C23A;
    font-size: 25px;
    margin-top: 7px;
    margin-left: 0.5%;
    cursor: pointer;
  }
  .el-icon-remove{
    color: #F56C6C;
    font-size: 25px;
    margin-top: 7px;
    margin-left: 0.5%;
    cursor: pointer;
  }
  .drawerDiv{
    width: 100%;
    height: calc(90vh);
    padding: 20px;
    overflow-y: auto;
    overflow-x: auto;
    box-sizing: border-box;
  }
</style>
